import React from 'react'
import {Grid, List} from 'antd-mobile'
import PropTypes from 'prop-types'

class AvatarSelector extends React.Component{
    static PropTypes = {
        selectAvatar:PropTypes.func.isRequired
    }
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    render() {
        const avatarList = 'boy,bull,chick,crab,girl,hedgehog,hippop,koala,lemur,man,pig,tiger,whale,woman,zebra'
        .split(',')
        .map(v=>({
                icon:require('../img/'+v+'.png'),
                text:v      
                }))

        const girdHeader = this.state.icon
                           ?(<div>
                               <span>已选择头像</span>
                               <img style={{width:20}} src={this.state.icon}/>
                             </div>)
                             :'请选择头像'
        return (
            <div>
                <List renderHeader={()=>girdHeader}>   
                    <Grid 
                        data={avatarList}
                        columnNum={5}
                        onClick={elm=>{
                            this.setState(elm)
                            this.props.selectAvatar(elm.text)
                        }}
                    />
                </List> 
            </div>
        )
    }
}
export default AvatarSelector